<template>
    <div class="article-list">
        <div class="article-list-card">
            <div class="member-list-head">

                <Row :gutter="5" style="margin-bottom: 10px">


                    <Col span="4">
                        <Input clearable placeholder="用户名" type="text" v-model="filterItems.username"></Input>
                    </Col>
                    <Col span="4">
                        <i-select v-model="filterItems.status" style="width:200px" clearable>
                            <i-option value="0">待发货</i-option>
                            <i-option value="1">已发货</i-option>
                            <i-option value="2">已收货</i-option>
                            <i-option value="-1">已取消</i-option>
                        </i-select>
                    </Col>


                    <Col span="2">
                        <ButtonGroup class="subSearch">
                            <!--<Button @click="$router.push({name:'member-add-nocache'})" type="primary" icon="plus-round">新增</Button>-->
                            <Button type="primary" @click="getArticleList">
                                <Icon type="ios-pulse-strong"></Icon>
                                筛 选
                            </Button>
                        </ButtonGroup>
                    </Col>
                </Row>
            </div>
            <i-table height="680" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name:"article-list",
        data(){
            return{
                columns:[
                    {
                        title: '订单号',
                        key: 'no',
                        // width: 100,
                        align:"center",
                    },
                    {
                        title: '用户名',
                        key: 'username',
                        // width: 100,
                        align:"center",
                    },
                    {
                        title: '价格',
                        key: 'coin_num',
                        align:"center",
                    },
                    {
                        title: '收货人',
                        key: 'get_name',
                        align:"center",
                    },
                    {
                        title: '收货人电话',
                        key: 'get_phone',
                        align:"center",
                    },
                    {
                        title: '收货人地址',
                        key: 'get_address',
                        align:"center",
                    },
                    {
                        title: '图片',
                        key: 'pic',
                        align:"center",
                        width:100,
                        render:(h,params)=>{
                            if(params.row.pic==""){
                                return "暂无"
                            }else{
                                return h("div",{
                                    style:{
                                        cursor: "pointer",
                                    },
                        on:{
                            mouseover:(e)=>{
                                this.$store.commit("setImgData",{
                                    src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                    x:e.x+50+"px",
                                    y:e.y-60+"px",
                                })
                            },
                            mousemove:(e)=>{
                                this.$store.commit("setImgData",{
                                    src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                                    x:e.x+50+"px",
                                    y:e.y-60+"px",
                                })
                            },
                            mouseout:(e)=>{
                                this.$store.commit("setImgData",{
                                    src:"",
                                    x:"0px",
                                    y:"0px",
                                })
                            }
                        }
                    },[
                                    h("img",
                                        {
                                            attrs:{
                                                src:params.row.pic
                                            },
                                            style:{
                                                width:"42px",
                                                height:"42px",
                                                borderRadius:"4px",
                                                margin:"0px auto",
                                                display:"block",
                                            },
                                        })
                                ])
                            }
                        }
                    },

                    {
                        title: '状态',
                        key: 'status',
                        align:"center",
                        width: 100,
                        render:(h,params)=>{
                            switch (params.row.status) {
                                case '0': return '待发货';
                                case '1': return '已发货';
                                case '2': return '已收货';
                                case '-1': return '已取消';
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'add_time',
                        align:"center",
                        render:(h,params)=>{
                            return this.timeFormat(params.row.add_time)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            if(params.row.status === '0') {
                                return h('ButtonGroup', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                        },
                                        on: {
                                            click: () => {
                                                this.fahuoCancel(params.row.id, 1)
                                            }
                                        }
                                    },"发 货"),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                        },
                                        on: {
                                            click: () => {
                                                this.fahuoCancel(params.row.id, '-1')
                                            }
                                        }
                                    },"取 消"),
                                ]);
                            }
                            return '暂无操作';
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                modal2:false,
                modal3:false,
                doIndex:0,//操作的下标
                modal_loading:false,
                filterItems: {
                    username: '',
                    status: ''
                }
            }
        },
        mounted(){
            this.getArticleList()
        },
        methods:{
            getArticleList(){
                this.getJsonData("Goods/getOrders",this.filterItems)
                    .then((res)=>{
                        this.data=res.data
                        this.total=parseInt(res.count)
                    })
            },
            changePage(n){
                this.index=n
                this.getArticleList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getArticleList()
            },
            fahuoCancel(id, status) {
                this.$Modal.confirm({
                    title: '提示',
                    content: `确定${status === 1?'发货':'取消'}吗？`,
                    onOk: () => {
                        this.getJsonData("Goods/changeStatus",{id, status})
                          .then((res)=>{
                              this.getArticleList();
                          })
                    },
                    onCancel: () => {

                    }
                });

            }
        }
    }
</script>
<style lang="less">
    @import "./article-list";
</style>
